<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button id="btn"></button>
    </div>
    <script src="./node_modules/redux/dist/redux.js"></script>
    <script>
        //引包
        const {createStore}=Redux;
        // console.log(Redux)
        //通过createStore来创建store(存储数据)
        const store=createStore(reducer)
        //创建reducer(修改数据的方法，action)
        function reducer (state={num:0},action){
            // console.log(state)
            //需要添加一个修改数据的action，increment、decrement
            //在action中返回的对象一定是一个新地址的对象
            switch(action.type){
                case 'increment':
                     return {...state,num:++state.num};
                case 'decrement':
                return {...state,num:--state.num}
            }
            return state;
        }
        //通过store的getState去获取数据
        // console.log(store.getState())
        function render(){
            btn.innerText=store.getState().num
        }
        //一开始就会渲染
        render();
        //操作视图去修改数据
        btn.onclick=function(){
            store.dispatch({type:'increment'})
            // render();
        }
        //subscribe只要reducer的state发生了变化，那就会触发subscribe中的回调函数，多个项目在一起时更好维护，监听数据
        store.subscribe(()=>{
            render();
        })
    </script>
</body>
</html>